<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      width: 350px;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    
    .header {
      text-align: center;
      margin-bottom: 20px;
    }
    
    .button {
      border: none;
      color: white;
      padding: 12px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 14px;
      margin: 6px 2px;
      cursor: pointer;
      border-radius: 4px;
      width: 100%;
      transition: background-color 0.3s;
    }
    
    .button.start {
      background-color: #4CAF50;
    }
    
    .button.start:hover {
      background-color: #45a049;
    }
    
    .button.stop {
      background-color: #f44336;
    }
    
    .button.stop:hover {
      background-color: #da190b;
    }
    
    .button:disabled {
      background-color: #cccccc;
      cursor: not-allowed;
    }
    
    .info {
      background-color: #e7f3ff;
      border: 1px solid #b3d9ff;
      border-radius: 4px;
      padding: 10px;
      margin: 10px 0;
      font-size: 12px;
      color: #0066cc;
    }
    
    .status {
      margin-top: 15px;
      text-align: center;
      font-size: 14px;
      padding: 8px;
      border-radius: 4px;
    }
    
    .status.success {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }
    
    .status.error {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }
    
    .status.info {
      background-color: #d1ecf1;
      color: #0c5460;
      border: 1px solid #bee5eb;
    }
    
    .settings {
      background-color: #f8f9fa;
      border: 1px solid #dee2e6;
      border-radius: 4px;
      padding: 12px;
      margin: 10px 0;
      font-size: 13px;
    }
    
    .switch-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 8px 0;
    }
    
    .switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 24px;
    }
    
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: .4s;
      border-radius: 24px;
    }
    
    .slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }
    
    input:checked + .slider {
      background-color: #4CAF50;
    }
    
    input:checked + .slider:before {
      transform: translateX(26px);
    }
    
    .switch-label {
      font-weight: 500;
      color: #333;
    }
    
    .switch-desc {
      font-size: 11px;
      color: #666;
      margin-top: 4px;
    }
  </style>
</head>
<body>
  <div class="header">
    <h2>Bing搜索自动化</h2>
  </div>
  
  <div class="settings">
    <div class="switch-container">
      <div>
        <div class="switch-label">日期模式</div>
        <div class="switch-desc">开启：17号后搜索50次，否则10次</div>
      </div>
      <label class="switch">
        <input type="checkbox" id="dateModeSwitch" checked>
        <span class="slider"></span>
      </label>
    </div>
  </div>
  
  <div class="info">
    <strong>使用说明：</strong><br>
    1. 请先访问 https://cn.bing.com/<br>
    2. 调整日期模式开关（可选）<br>
    3. 点击"开始自动搜索"按钮<br>
    4. 脚本会自动执行搜索操作
  </div>
  
  <button id="startBtn" class="button start">开始自动搜索</button>
  <button id="stopBtn" class="button stop" disabled>停止搜索</button>
  
  <div id="status" class="status" style="display: none;"></div>
  
  <script src="popup.js"></script>
</body>
</html>